<template>
  <div>
    <!-- 属性/方法 类型（css/js） 用法描述 详情 -->
    <CustomTable :tableData="tableData" :tableCol="columnList"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {val: 'mask', type: 'css', desc: '图片蒙版', useIn: '图片对盒子进行裁剪或衣服换颜色等效果', path: '/mask'},
        {
          val: 'Intersectionobserver',
          type: 'js',
          desc: '异步观察目标元素与其祖先元素或顶级文档视口(viewport)交叉状态的方法',
          useIn: '图片/节点内容下滑懒加载 预加载等 避免资源消耗',
          path: "/Intersectionobserver"
        },{
          val: 'generateImg',
          type: 'URL',
          desc: '自动生成图片链接',
          useIn: '两个动态url 可用于图片占位 测试等',
          path: "/generateImg"
        }
      ],
      columnList: [
        //  属性/方法 类型（css/js） 用法描述 详情
        {
          label: '属性/方法',
          prop: 'val'
        },
        {
          label: '类型',
          prop: 'type'
        },
        {
          label: '方法/属性 描述',
          prop: 'desc'
        },
        {
          label: "用于",
          prop: 'useIn'
        },
        {
          label: '操作',
          prop: 'op',
          type: "button",
          action: [
            {
              text: '查看详情',
              click: (row) => {
                // console.log("row==", row)
                this.$router.push(row.path)
              },
            }
          ]
        }
      ],
    }
  },
  methods: {},
  mounted() {
  }
}
</script>

<style lang="scss" scoped>

</style>
